<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      border-collapse: collapse;
    }

    td {
      width: 100px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border: 1px solid #000;
      font-size: 20px;
    }

    .form>input {
      width: 400px;
    }

    .change {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      justify-content: center;
      align-items: center;
      position: fixed;
      top: 0;
      left: 0;
    }

    .change>div {
      width: 500px;
      height: 500x;
      padding: 30px 15px;
      background: #fff;

    }

    .form {
      display: flex;
      align-content: center;
      flex-wrap: nowrap;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-around;
    }

    .change input {
      width: 400px;
    }
  </style>
</head>

<body>
  <div class="add">
    <div class="form">
      姓名: <input type="text" name="name" placeholder="只能包含数字字母下划线,且数字不能开头,长度在8-16之间"><br>
      联系电话: <input type="text" name="phone"><br>
      学历: <input type="text" name="edu"><br>
      年龄: <input type="text" name="age"><br>
      期望薪资: <input type="text" name="money"><br>
    </div>
    <br>
    <button name="yes">确定</button>
    <button name="reset">重置</button>
  </div>

  <hr>


  <table>
    <thead>
      <tr>
        <td>姓名</td>
        <td>联系电话</td>
        <td>学历</td>
        <td>年龄</td>
        <td>期望薪资</td>
        <td>修改</td>
        <td>删除</td>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <div class="change">
    <div>
      姓名: <input type="text" name="changename" placeholder="只能包含数字字母下划线,且数字不能开头,长度在8-16之间"><br>
      联系电话: <input type="text" name="changephone"><br>
      学历: <input type="text" name="changeedu"><br>
      年龄: <input type="text" name="changeage"><br>
      期望薪资: <input type="text" name="changemoney"><br>
      <button name="changeBtn">确定</button>
      <button name="changeNo">取消</button>
    </div>
  </div>


  <script>
    // 根据数组动态生成页面
    // const arr = [
    //   {id: 1,name: '张三',phone: '123',edu: '大学',age: 18,money:'12000'},
    //   {id: 2,name: '李四',phone: '123',edu: '大学',age: 19,money: '13000'},
    //   {id: 3,name: '王五',phone: '123',edu: '大学',age: 20,money: '14000'},
    //   {id: 4,name: '赵六',phone: '123',edu: '大学', age: 21,money: '15000'},
    //   {id: 5,name: '田七',phone: '123',edu: '大学',age: 22,money: '16000'},
    // ];

    // users 数组应该是从 localStorage 内取出来的
    const arr = JSON.parse(window.localStorage.getItem('arr')) || []
    // 获取渲染父元素
    const tboty = document.querySelector('tbody')
    // 获取元素(添加)
    const nameIpt = document.querySelector('[name="name"]')
    const phoneIpt = document.querySelector('[name="phone"]')
    const eduIpt = document.querySelector('[name="edu"]')
    const ageIpt = document.querySelector('[name="age"]')
    const moneyIpt = document.querySelector('[name="money"]')
    const yes = document.querySelector('[name="yes"]')
    const reset = document.querySelector('[name="reset"]')
    //  获取元素(修改相关)
    const changeBox = document.querySelector('.change')
    const changeName = document.querySelector('[name="changename"]')
    const changePhone = document.querySelector('[name="changephone"]')
    const changeEdu = document.querySelector('[name="changeedu"]')
    const changeAge = document.querySelector('[name="changeage"]')
    const changeMoney = document.querySelector('[name="changemoney"]')
    const changeBtn = document.querySelector('[name="changeBtn"]')
    const changeNo = document.querySelector('[name="changeNo"]')

    // 准备一个开关
    let flag = false


    // 渲染函数
    setPage()

    function setPage() {
      if (arr.length === 0) {
        tboty.innerHTML = '<tr><td colspan="7">没有匹配数据</td></tr>'
        return
      }
      let str = ''
      arr.forEach(function (item, key) {
        str += `
        <tr>
          <td>${item.name}</td>
          <td>${item.phone}</td>
          <td>${item.edu}</td>
          <td>${item.age}</td>
          <td>¥${item.money}</td>
          <td><button name="change" index="${key}">修改</button></td>
          <td><button name="del" index="${key}">删除</button></td>
        </tr>
        `
      })

      tboty.innerHTML = str

      window.localStorage.setItem('arr', JSON.stringify(arr))
    }

    // add 点击事件
    yes.addEventListener('click', function () {
      let nameVal = nameIpt.value
      let phoneVal = phoneIpt.value
      let eduVal = eduIpt.value
      let ageVal = ageIpt.value
      let moneyVal = moneyIpt.value
      // 姓名验证
      let name = /^[a-zA-Z][a-zA-Z0-9_]{7,15}$/
      if (!name.test(nameVal)) {
        alert('您输入的姓名不符合规范')
        return
      }
      // 联系方式手机号验证
      let phone = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
      if (!phone.test(phoneVal)) {
        alert('您输入的联系方式不符合规范')
        return
      }
      // 非空验证
      if (!nameVal || !phoneVal || !eduVal || !ageVal || !moneyVal) {
        alert('请完整填写表格')
        return
      }
      // 创建一个一样的数据
      const info = {
        name: nameVal,
        phone: phoneVal,
        edu: eduVal,
        age: ageVal,
        money: moneyVal
      }
      // 把数据放入 arr 数组
      arr.push(info)
      // 重新渲染页面
      setPage()
    })
    // 重置 点击事件
    reset.addEventListener('click', function () {
      nameIpt.value = ''
      phoneIpt.value = ''
      eduIpt.value = ''
      ageIpt.value = ''
      moneyIpt.value = ''
      setPage()
    })


    tboty.addEventListener('click', function (e) {
      e = e || window.event
      // 删除 点击事件
      if (e.target.getAttribute('name') === 'del') {
        if (!confirm('您确定要删除吗?')) return

        arr.splice(Number(e.target.getAttribute('index')), 1)

        setPage()
      } else if (e.target.getAttribute('name') === 'change') {

        // 让修改框出现
        changeBox.style.display = 'flex'

        // 给 变量赋值 存储 修改标签 对应的索引下标
        index = Number(e.target.getAttribute('index'));

        // 给修改框的value 赋值arr里的对应数据
        changeName.value = arr[index].name
        changePhone.value = arr[index].phone
        changeEdu.value = arr[index].edu
        changeAge.value = arr[index].age
        changeMoney.value = arr[index].money
      }
    })
    changeBtn.addEventListener('click', function () {
      if (confirm('您确定要修改吗?')) {
        let newName = changeName.value
        let newPhone = changePhone.value
        let newEdu = changeEdu.value
        let newAge = changeAge.value
        let newMoney = changeMoney.value

        // 修改姓名验证
        let name = /^[a-zA-Z][a-zA-Z0-9_]{7,15}$/
        if (!name.test(newName)) {
          alert('您输入的姓名不符合规范')
          return
        }
        // 联系方式手机号验证
        let phone = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
        if (!phone.test(newPhone)) {
          alert('您输入的联系方式不符合规范')
          return
        }
        // 非空验证
        if (!newName || !newPhone || !newEdu || !newAge || !newMoney) {
          alert('请完整填写表格')
          return
        }

        arr[index].name = newName
        arr[index].phone = newPhone
        arr[index].edu = newEdu
        arr[index].age = newAge
        arr[index].money = newMoney

        // 重新渲染
        setPage()

        // 让 编辑框 再隐藏
        changeBox.style.display = 'none'
      }
    })
    changeNo.addEventListener('click', function () {
      changeBox.style.display = 'none'
    })
  </script>
</body>

</html>